<template>
  <section class="main-body">
    <div class="nav-bar-conatiner">
      <img class="logo" src="../assets/logo.jpeg" />
    </div>
    <section class="main-body-section">
      <div class="image-container">
        <div class="word-field">
          <div class="image-word">小易搜索</div>
          <div class="image-word">搜你所想</div>
        </div>
      </div>
      <div class="content-conatiner">
        <div class="login_container">
          <a><img class="qr-code" v-if="!qrLogin" src="../assets/qr-code-half.png" @click="qrLogin = !qrLogin" /></a>
          <a><img class="account" v-if="qrLogin" src="../assets/account.png" @click="qrLogin = !qrLogin" /></a>
          <div class="container__main">
              <div class="login-container" v-if="!qrLogin">
                <b-field
                >
                  <b-input placeholder="请输入帐号"
                      v-model="username"
                      icon="account">
                  </b-input>
                </b-field>

                <b-field
                >
                  <b-input
                    type="password"
                    placeholder="请输入密码"
                    v-model="password"
                    icon="lock"
                    style="margin-top:20px;"
                    password-reveal
                  >
                  </b-input>
                </b-field>
                <b-checkbox style="margin-top:10px;" v-model="isRemberPassword">记住密码</b-checkbox>
                <!--<p class="control level" style="padding-top: 20px">-->
                <div style="padding-top: 40px;">
                  <a :class="['button is-info',{'is-loading':isLoading}]" style="width:100%;" @click="loginAction">
                    登录
                  </a>
                  <!-- <router-link to="/search" class="button login">
                    登录
                  </router-link> -->
                </div>
              </div>
              <div class="login_qr" v-if="qrLogin">
                  <img class="qr-img" src="../assets/login-qr.png"/>
              </div>
          </div>
        </div>
      </div>
    </section>
    <div class="login-footer">
      <span class="footer-word">
        小易搜索   晓通全球
      </span>
    </div>
  </section>
</template>
<script>
import { login } from "@/api/auth.js";
import { destroyToken, saveToken } from "@/util/tokenStorage.js";
import { destroyUserId, saveUserId, saveUserAuth, destroyUserAuth } from "@/util/userInfoStorage.js"
import { SEARCH, USER } from "@/router/name";
const USER_NAME = 'user_name';
const PASSWORD = 'password';
export default {
  data() {
    return {
      username: "",
      password: "",
      isFullPage: true,
      isLoading: false,
      qrLogin: false,
      isRemberPassword: false,
    };
  },
  mounted() {
    destroyToken();
    destroyUserId();
    destroyUserAuth();
    //查看是否有记住密码
    let username = window.localStorage.getItem(USER_NAME);
    if(username){
      this.username = username;
      this.password =  window.localStorage.getItem(PASSWORD);
      this.isRemberPassword = true;
    }
  },
  methods: {
    //记住密码
    remeberPassword(){
      this.isRemberPassword = true;
    },
    async loginAction(){
      const { username = "", password = "" } = this;
      if(!(username && password)){
        this.$toast.open({
          message: '请输入用户名及密码',
          type: 'is-danger'
        })
        return;
      }
      //记住密码
      if(this.isRemberPassword){
        window.localStorage.setItem(USER_NAME,username);
        window.localStorage.setItem(PASSWORD,password);
      }
      this.isLoading = true;
      login({username, password}).then((res) => {
        this.isLoading = false;
        const { data, _header: { Authorization }} = res;
        saveToken(Authorization);
        saveUserId(data.id);
        saveUserAuth(data.role);
        if(data.role == 'admin'){
          this.$router.push({name: USER});
        }else{
          this.$router.push({ name: SEARCH });
        }
      }).catch((e) => {
        this.isLoading = false;
        this.$toast.open({
          message: e.message || '登录失败',
          type: 'is-danger'
        })
      })
    }
  }
};
</script>
<style lang="less" scoped>
.login_qr {
  .qr-img {
    height: 200px;
    width: 200px;
  }
}
.account {
   position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
}
.qr-code {
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 60px;
}

.outer-container {
  min-height: 100vh;
}
.login_container {
  width: 100%;
  position: relative;
  .container__main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    max-width: 40vw;
    margin: 0 auto;
    // padding-bottom: 20px;
  }
}
.author {
  /*<!--color: $footer-color;-->*/
  text-align: center;
}
.main-body {
  position: relative;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  // flex-direction: row-reverse;
  // background-image: url("../assets/login_background.png");
  // background-size: cover;
  .login-footer {
    position: fixed;
    background-color: #f7f6f6;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .footer-word {
      font-size: 1.3rem;
      font-weight: bold;
    }
  }
  .nav-bar-conatiner{
    position: fixed;
    background-color: #ffffff;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 8vh;
    display: flex;
    align-items: center;
    .logo {
      margin-left: 60px;
      height: 5vh;
    }
  }
  .main-body-section {
    display: flex;
    background-color: #ffffff;
    min-height: 60%;
    width: 65%;
    .image-container {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 100%;
        width: 40%;
      }
      .word-field {
        .image-word {
          color: white;
          font-size: 4rem;
          font-weight: bold;
          text-shadow:2px 2px 0px #005073;
        }
      }
      background-image: url('../assets/timg.jpeg');
      background-size: cover;
      background-position: center;
    }
    .content-conatiner {
      flex: 1;
    }
  }
}
.login-container {
  padding: 30px;
}
</style>
